<template>
  <div class="logform">
    <div class="form">
      <h1>欢迎注册</h1>
      <ul>
        <li>
          <label for="">学号：</label
          ><input type="text" placeholder="请输入学号" v-model="id" />
        </li>
        <li>
          <label for="">姓名：</label>
          <input type="text" placeholder="请输入姓名" v-model="name" />
        </li>
        <li>
          <label for="">班级：</label>
          <select v-model="class_id">
            <option
              v-for="(obj, index) in total_class"
              :key="index"
              :value="obj.class_id"
              >{{ obj.class_name }}</option
            >
          </select>
        </li>
        <li>
          <div class="sex">
            <label for="" style="font-size:17px">性别：</label>
            <input type="radio" value="0" v-model="sex" />男
            <input type="radio" value="1" v-model="sex" />女
          </div>
        </li>
        <li>
          <label for="">生日：</label>
          <input type="date" v-model="birth" />
        </li>
        <li>
          <label for="">密码：</label>
          <input type="password" placeholder="请输入密码" v-model="password" />
        </li>
        <li>
          <label for="">确认密码：</label>
          <input
            type="password"
            placeholder="再次输入确认密码"
            v-model="password2"
          />
        </li>
        <li class="infor">
          <span>{{ infor }}</span>
        </li>
        <li class="button">
          <button class="log" @click="register">注册</button>
          <button class="reset" @click="reset">重置</button>
        </li>
      </ul>
      <div class="login">
        <p>已有账号？<a @click="jump">点我登录</a></p>
      </div>
    </div>
  </div>
</template>

<script>
import { request } from "../api/index";
export default {
  name: "Register",
  data() {
    return {
      id: "",
      name: "",
      sex: "",
      class_id: "",
      birth: "",
      password: "",
      password2: "",
      total_class: [],
      infor: "",
    };
  },
  created() {
    this.initData();
  },
  methods: {
    jump() {
      this.$router.push("/start/login");
    },
    initData() {
      request({ method: "get", url: "/class/class_view" }).then((res) => {
        this.total_class = res.data.class_all;
        // console.log(this.total_class);
        this.class_id = this.total_class[0].class_id; //初始化班级
      });
    },
    reset() {
      (this.id = ""),
        (this.name = ""),
        (this.password = ""),
        (this.password2 = ""),
        (this.birth = ""),
        (this.class_id = ""),
        (this.sex = ""),
        (this.infor = "");
    },
    register() {
      if (
        this.id == "" ||
        this.name == "" ||
        this.password == "" ||
        this.password2 == "" ||
        this.birth == "" ||
        this.class_id == "" ||
        this.sex == ""
      ) {
        this.infor = "信息输入不完整！";
      } else if (this.password2 !== this.password) {
        this.infor = "两次密码输入不一致";
      } else {
        request({
          method: "post",
          url: "user/register",
          data: {
            id: this.id,
            name: this.name,
            class_id: this.class_id,
            birthday: this.birth,
            sex: this.sex,
            password: this.password,
          },
        })
          .then((res) => {
            if (res.data.message == "success") {
              alert("注册成功！");
              this.$router.push("/start/login");
            }
          })
          .catch((err) => {
            alert("对不起,注册失败！");
          });
      }
    },
  },
};
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
.container .logform {
  position: relative;
  margin: 0 auto;
  width: 679px;
  height: 560px;
  background-color: rgba(252, 255, 252, 0.6);
  box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);
  border-radius: 30px;
}
.container .logform .form {
  width: 470px;
  height: 560px;
  margin: 150px auto;
}
.container .logform .form h1 {
  text-align: center;
  color: #989898;
}
.container .logform .form ul {
  width: 370px;
  height: 100px;
  margin: 30px auto;
}
.container .logform .form label {
  display: inline-block;
  width: 102px;
  height: 52px;
  font-size: larger;
  font-weight: 600;
  text-align: right;
  color: #282828;
}
.container .logform .form ul li input {
  margin-left: 15px;
  border-radius: 5px;
  border-style: hidden;
  height: 30px;
  width: 140px;
  background-color: rgba(216, 191, 216, 0.5);
  outline: none;
  color: rgb(104, 100, 100);
  padding-left: 10px;
}
select {
  margin-left: 15px;
  height: 30px;
  width: 140px;
  padding-left: 10px;
  border-style: hidden;
  border-radius: 5px;
  outline: none;
  background-color: rgba(216, 191, 216, 0.5);
}
.container .logform .form h5 {
  text-align: center;
  padding-bottom: 20px;
}
.container .logform .form ul .button {
  background-color: inherit;
  text-align: center;
  position: relative;
}
.log:hover {
  cursor: pointer !important;
  background-color: rgb(0, 0, 255);
}
.reset:hover {
  cursor: pointer !important;
  background-color: rgb(0, 0, 255);
}
.container .logform .form ul .button .log {
  position: absolute;
  left: 68px;
  width: 100px;
  height: 31px;
  background-color: #6593e3;
  border-style: hidden;
  border-radius: 5px;
  border-color: cornsilk;
  background-color: rgba(100, 149, 237, 0.7);
  color: aliceblue;
  font-size: 16px;
}
.container .logform .form .button .reset {
  position: absolute;
  right: 75px;
  width: 100px;
  height: 31px;
  background-color: #6593e3;
  border-style: hidden;
  border-radius: 5px;
  border-color: cornsilk;
  background-color: rgba(100, 149, 237, 0.7);
  color: aliceblue;
  font-size: 16px;
}
.sex {
  width: 100%;
  font-size: 16px;
  font-weight: bold;

  input {
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    vertical-align: middle;
    background-color: rgba(216, 191, 216, 0.5);
    border-style: hidden;
    outline: none;
  }
}
.container .logform .form ul .infor {
  text-align: center;
  font-size: 18px;
  color: red;
  font-style: italic;
  font-weight: bold;
}
.login {
  position: absolute;
  bottom: 38px;
  right: 83px;
  text-align: center;
  // color: rgb(60, 126, 248);
  text-decoration: none;
  font-size: 17px;
  font-style: initial;
}
.login p {
  color: black;
  font-weight: 700;
}
</style>
